<template>
  <div class="item">
    <h2 style="margin-bottom: 30px;">个人中心</h2>
    <div class="block">
      <el-image
        class="image"
        fit="cover"
        style="width: 100px; height: 100px"
        :src="form.picUrl"
        :preview-src-list="srcList"
      >
        <div slot="error" class="image-slot" style="height: 100px;">
          <i class="el-icon-picture-outline" style="margin: 40px;"></i>
        </div>
      </el-image>
      <div class="button">
        <input
          ref="input"
          class="normalImgUploadAdd"
          accept="image/jpeg,image/jpg,image/png"
          multiple="5"
          type="file"
          autocomplete="off"
          style="display: none"
          value=""
          @change="fileChange"
        />
        <el-button @click="setPic">更换头像</el-button>
      </div>
      <el-button class="button" type="text" @click="drawer = true">管理收货地址</el-button>
    </div>
    <h3 style="margin-bottom: 10px;">基本信息</h3>
    <el-form label-width="100px" label-position="left" style="width:800px">
      <el-form-item label="昵称：">
        <el-input v-model="form.username" :placeholder="userInfo.username"></el-input>
      </el-form-item>
      <el-form-item label="联系方式：">
        <el-input v-model="form.phone" :placeholder="userInfo.phone"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱：">
        <el-input v-model="form.email" :placeholder="userInfo.email"></el-input>
      </el-form-item>
      <el-form-item label="地址：">
        <area-cascader
          class="area-cascader-wrap"
          :level="1"
          type="text"
          :placeholder="userInfo.address"
          v-model="address"
          :data="pcaa"
        ></area-cascader>
      </el-form-item>
      <el-form-item label="修改密码：">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item style="text-align: right;">
        <el-button type="primary" @click="onSave">保存</el-button>
        <el-button type="danger" @click="onExit">退出登陆</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <AddAddress @updata="updata" :myAddress="myAddress" :key="dialogVisible"></AddAddress>
    </el-dialog>

    <el-drawer title="我的收货地址" :visible.sync="drawer" direction="rtl" size="50%" :before-close="handleClose">
      <el-table class="el-table" :data="tableData" style="width: 100%">
        <el-table-column prop="addressname" label="收件人" width="90"> </el-table-column>
        <el-table-column prop="telephone" label="联系方式" width="130"> </el-table-column>
        <el-table-column prop="area" label="地区" width="180"> </el-table-column>
        <el-table-column prop="address" label="详细地址" width="120"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="button">
        <el-button type="primary" @click="handadd">添加收货地址</el-button>
        <el-button type="danger" @click="drawer = false">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import AddAddress from './component/address.vue'
import 'vue-area-linkage/dist/index.css'
import { pca, pcaa } from 'area-data'
import { selectAddress, deleteAddressById } from '@/api/user.js'
export default {
  data() {
    return {
      title: '',
      myAddress: '',
      isVisible: false,
      drawer: false,
      tableData: [],
      dialogVisible: false,
      // 选择的地址
      address: '',
      pca: pca,
      pcaa: pcaa,
      form: {
        userId: this.$store.state.user.profile.userId,
        username: '',
        phone: '',
        address: '',
        password: '',
        email: '',
        picUrl: this.$store.state.user.profile.picUrl
      },
      src: this.$store.state.user.profile.picUrl,
      srcList: [this.$store.state.user.profile.picUrl]
    }
  },
  watch: {
    address: function(value) {
      this.form.address = value.join('-')
    }
  },
  components: { AddAddress },
  computed: {
    userInfo: function() {
      return this.$store.state.user.profile
    }
  },
  methods: {
    updata() {
      this.dialogVisible = false
      this.getAddress()
    },
    // 添加按钮
    handadd() {
      this.myAddress = []
      this.dialogVisible = true
      this.title = '添加收货地址'
    },
    // 編輯
    handleEdit(row) {
      this.myAddress = row
      this.dialogVisible = true
      this.title = '编辑收货地址'
    },
    // 刪除
    async handleDelete(row) {
      const res = await deleteAddressById({ id: row.addressid })
      if (res.data.code == '000') {
        this.$message.success('刪除成功')
        this.getAddress()
      } else {
        this.$message.warning('操作失敗')
      }
    },
    //获取收货地址
    async getAddress() {
      const res = await selectAddress({ userid: this.$store.state.user.profile.userId })
      if (res.data.code == '000') {
        console.log(res.data)
        this.tableData = res.data.data
      } else {
        this.$message.warning(res.data.messaga)
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch(() => {})
    },
    // fileChange
    fileChange(event) {
      event.preventDefault()
      const file = event.srcElement.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = e => {
        // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
        const imgcode = e.target.result
        this.form.picUrl = imgcode
      }
    },
    // 修改头像
    setPic() {
      this.$refs.input.click()
    },
    // 保存用户信息
    onSave() {
      console.log(this.form)
      this.$store.dispatch('user/updataUserInfo', { ...this.form })
    },
    // 退出登录
    onExit() {
      // 跳转到首页
      this.$store.commit('user/deletetoken')
      this.$router.push('/')
    }
  },
  created() {
    this.getAddress()
  }
}
</script>

<style scoped lang="less">
.button {
  margin: 20px;
}
.el-table {
  margin: 15px;
}
.area-cascader-wrap {
  width: 100%;
  ::v-deep.large {
    width: 100%;
    line-height: 20px;
  }
}
.item {
  width: 1000px;
  background-color: white;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin: 0 auto;
}
.image {
  background-color: #f5f7fa;
}
.block {
  display: flex;
  .button {
    margin: 60px 0 0 60px;
  }
}
</style>
